import React, {useEffect, useState} from 'react';
import {Button, Form, Input, InputNumber, message, Modal, Space} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import UploadBanner from "@/cms/UploadBanner";

function UseAddEdit({queryList}) {
    const [open,setOpen] = useState(false),
        [loading,setLoading] = useState(false),
        [form] = Form.useForm();
    const tags = Form.useWatch("tags",form);
    console.log(tags)
    function onCancel(){
        setOpen(false)
    }
    useEffect(()=>{
        if (open === false){
            form.resetFields();
        }else if(open.ID){
            form.setFieldsValue({
                wifi1:open.wifi.split("-")[0],
                wifi2:open.wifi.split("-")[1],
                ...open,
            })
        }else{
            form.setFieldsValue({
                price_list:[{}],
                tags:[""]
            })
        }
    },[open])
    function onOk(){
        form.validateFields().then(values => {
            if (open.ID){
                values.ID=open.ID
            }
            ax.post("/api/addRoom",{
                ...values,
                wifi:values.wifi1+"-"+values.wifi2,
                banners:values.banners.map(item=>({url:item.url||item.response.message}))
            }).then(res=>{
                message.success(res.msg);
                queryList();
                onCancel();
            })
        })
    }
    return {
        setOpen,
        ModalDOM:<Modal
            title={open?.ID?"编辑":"添加"}
            open={open}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={loading}
            width={800}
        >
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
            >
                <Form.Item
                    label={"房间名称"}
                    name={"name"}
                    rules={[
                        {
                            required: true,
                            message: '请输入房间名称!',
                        },
                    ]}
                >
                    <Input placeholder={"请输入"} />
                </Form.Item>
                <Form.Item
                    label={"适合人数"}
                    name={"nums"}
                    rules={[
                        {
                            required: true,
                            message: '请输入适合人数!',
                        },
                    ]}
                >
                    <Input placeholder={"如: 3-5人"}/>
                </Form.Item>
                <Form.Item
                    label={"保洁时长"}
                    name={"delay"}
                    rules={[
                        {
                            required: true,
                            message: '请输入适合人数!',
                        },
                    ]}
                >
                    <InputNumber placeholder={"分钟"} addonAfter={"分钟"}/>
                </Form.Item>

                <Form.Item
                    label={"价格设置"}
                    rules={[
                        {
                            required: true,
                            message: '请输入适合人数!',
                        },
                    ]}
                >
                    <Form.List name="price_list">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, ...restField }) => (
                                    <Space
                                        key={key}
                                        style={{
                                            display: 'flex',
                                            marginBottom: 8,
                                        }}
                                        align="baseline"
                                    >
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'duration']}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写时长',
                                                },
                                            ]}
                                        >
                                            <InputNumber style={{width:"100%"}} addonAfter={"小时"} placeholder={"时长(小时)"}/>
                                        </Form.Item>
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'price']}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写对应时长价格',
                                                },
                                            ]}
                                        >
                                            <InputNumber style={{width:"100%"}} addonAfter={"单价/元"} placeholder={"对应时长价格"}/>
                                        </Form.Item>

                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item>
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加价格规则
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Form.Item>
                <Form.Item
                    label={"标签"}
                >
                    <Form.List name="tags">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, ...restField }) => (
                                    <Space
                                        key={key}
                                        style={{
                                            display: 'flex',
                                            marginBottom: 8,
                                        }}
                                        align="baseline"
                                    >
                                        <Form.Item
                                            {...restField}
                                            name={[name]}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写标签',
                                                },
                                            ]}
                                        >
                                            <Input style={{width:"410px"}} placeholder={"如:WIFI"}/>
                                        </Form.Item>
                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item>
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加标签
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Form.Item>
                {
                    tags?.includes("WIFI") && <div>
                        <Form.Item
                            label={"WIFI账号"}
                            name={"wifi1"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input placeholder={"请输入wifi账号"}/>
                        </Form.Item>
                        <Form.Item
                            label={"WIFI密码"}
                            name={"wifi2"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input placeholder={"请输入wifi密码"}/>
                        </Form.Item>
                    </div>
                }
                <Form.Item
                    label={"房间照片"}
                    name={"banners"}
                    rules={[
                        {
                            required: true,
                            message: '请上传房间照片!',
                        },
                    ]}
                >
                    <UploadBanner />
                </Form.Item>
            </Form>
        </Modal>
    }
}

export default UseAddEdit;